<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 | {$system_name}</title>

    <link rel="stylesheet" href="{_INDEX_STATIC_}/lib/bootstrap/css/bootstrap.min.css">
    <script src="{_INDEX_STATIC_}/lib/jquery/jquery.js"></script>
    <script src="{_INDEX_STATIC_}/lib/layer/layer.js"></script>
    <script src="{_INDEX_STATIC_}/lib/bootstrap/js/bootstrap.min.js"></script>

    <style>
        .login_app {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .login_top {
            position: absolute;
            left: 18%;
            top: 250px;
            background: linear-gradient(to right, red, blue);
            -webkit-background-clip: text;
            color: transparent;
            font-size: 64px;
        }

        .login_left {
            display: inline-block;
            margin-top: 100px;
            margin-left: 40px;
        }

        .login_left>img {
            width: 800px;
            height: 460px;
        }

        .login_right {
            display: inline-block;
            margin-left: 60px;
            padding: 30px;
            height: 300px;
            width: 400px;
        }

        .login_right>button {
            width: 100%;
        }
    </style>
</head>

<body>

    <div class="login_app">

        <div class="login_top">
            {$system_name}
        </div>

        <div class="login_left">
            <img src="{_INDEX_STATIC_}/img/login/login1.jpg" alt="">
        </div>

        <div class="login_right">

            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text"> 账&nbsp;&nbsp;&nbsp;号 </span>
                </div>
                <input id="account" type="text" class="form-control" placeholder="请输入账号">
            </div>

            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text"> 密&nbsp;&nbsp;&nbsp;码 </span>
                </div>
                <input id="password" type="password" class="form-control" placeholder="请输入密码">
            </div>

            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">验证码</span>
                </div>
                <input id="captcha" type="text" class="form-control" placeholder="请输入验证码">
                <img id="captcha_src" src="{:url('login/verify')}" style="width: 30%;">
            </div>

            <button id="login" type="button" class="btn btn-primary">登录</button>
        </div>

    </div>

    <script>

        // 登录
        $("#login").on('click', function () {

            var account = $('#account').val().trim();
            var password = $('#password').val().trim();
            var captcha = $('#captcha').val().trim();

            if (account == '') {
                return layer.msg('账号不能为空', { icon: 2, time: 900 });
            }
            if (password == '') {
                return layer.msg('密码不能为空', { icon: 2, time: 900 });
            }
            if (captcha == '') {
                return layer.msg('验证码不能为空', { icon: 2, time: 900 });
            }

            $.ajax({
                url: "{:url('login/login')}",
                data: {
                    'account': account,
                    'password': password,
                    'captcha': captcha
                },
                type: "POST",
                dataType: "JSON",
                success: function (res) {
                    // 返回结果处理
                    if (res.code == 0) {
                        layer.msg(res.msg, { icon: 1, time: 900 }, function () {
                            window.location.href = "{:url('index/index')}";
                        });
                    } else {
                        layer.msg(res.msg, { icon: 2, time: 900 },function () {
                            refresh_verification_code();
                        });
                    }
                }
            });

        });

        // 刷新验证码
        $("#captcha_src").bind("click", function () {
            refresh_verification_code();
        });

        // 刷新验证码
        function refresh_verification_code() {
            var timestamp = Date.parse(new Date());
            $("#captcha_src").attr("src", "{:url('login/verify')}?t=" + timestamp);
            $("#captcha").val('');
        }

    </script>

</body>

</html>